<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-13 11:00:36
 * @LastEditors: your name
 * @LastEditTime: 2021-09-07 09:35:42
 * @Description: file content
-->
<template>
  <div class="">
    <el-form
      class="mqtt_env-form"
      :model="dynamicValidateForm"
      :ref="refName"
      label-width="80px"
    >
      <el-form-item
        label="域名"
        prop="host"
        :rules="[
          {
            required: fieldRequired,
            message: '域名不能为空',
            trigger: 'change',
          },
          {
            pattern: HOST_REG,
            message: '请输入有效的域名',
            trigger: 'change',
          },
        ]"
      >
        <el-input
          v-model.trim="dynamicValidateForm.host"
          placeholder="请输入域名"
          :maxlength="64"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="端口"
        prop="port"
        :rules="[
          {
            required: fieldRequired,
            message: '端口不能为空',
            trigger: 'change',
          },
          {
            pattern: PORT_REG,
            message: '请输入有效的端口',
            trigger: 'change',
          },
        ]"
      >
        <el-input
          v-model.trim="dynamicValidateForm.port"
          placeholder="请输入端口"
          :maxlength="5"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="用户名"
        prop="username"
        :rules="[
          {
            required: fieldRequired,
            message: '用户名不能为空',
            trigger: 'change',
          },
        ]"
      >
        <el-input
          v-model.trim="dynamicValidateForm.username"
          placeholder="请输入用户名"
          :maxlength="64"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="密码"
        prop="password"
        :rules="[
          {
            required: fieldRequired,
            message: '密码不能为空',
            trigger: 'change',
          },
        ]"
      >
        <el-input
          v-model.trim="dynamicValidateForm.password"
          placeholder="请输入密码"
          show-password
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :disabled="!testAble"
          @click="testConnect"
          :loading="connectLoading"
          >测试连接</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { HOST_REG, PORT_REG } from "@/utils/reg"
import { postHmmqttLinktest } from "@/apis/paas/HmMqttLinkController.js"
export default {
  name: "MqttEnvForm",
  props: {
    env: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      HOST_REG,
      PORT_REG,
      dynamicValidateForm: {
        host: "",
        port: "",
        username: "",
        password: "",
      },
      connectLoading: false,
    }
  },

  computed: {
    fieldRequired() {
      const { host, port, username, password } = this.dynamicValidateForm
      const hasPost = (host || "").trim().length > 0
      const hasPort = (port || "").trim().length > 0
      const hasUsername = (username || "").trim().length > 0
      const hasPassword = (password || "").trim().length > 0
      return (
        this.env === "DEV" || hasPost || hasPort || hasUsername || hasPassword
      )
    },
    refName() {
      return "dynamicValidateForm" + this.env
    },
    testAble() {
      const { host, port, username, password } = this.dynamicValidateForm
      const hasPost = (host || "").trim().length > 0
      const hasPort = (port || "").trim().length > 0
      const hasUsername = (username || "").trim().length > 0
      const hasPassword = (password || "").trim().length > 0
      return hasPost && hasPort && hasUsername && hasPassword
    },
  },

  methods: {
    setData(data = {}) {
      this.connectLoading = false
      this.dynamicValidateForm = {
        ...data,
      }
      if (data.port !== undefined) {
        this.dynamicValidateForm.port = data.port + ""
      }
      this.$nextTick(() => {
        this.$refs[this.refName].clearValidate()
      })
    },

    async getData() {
      try {
        await this.$refs[this.refName].validate()
        const { host, port, username, password } = this.dynamicValidateForm
        const { env } = this
        const setting = {
          env,
          host,
          port,
          username,
          password,
        }
        for (const key in setting) {
          setting[key] = (setting[key] || "").trim()
        }
        return setting
      } catch (error) {
        return false
      }
    },
    async testConnect() {
      this.connectLoading = true
      try {
        await this.$refs[this.refName].validate()
        const { host, port, username, password } = this.dynamicValidateForm
        const setting = {
          host,
          port,
          username,
          password,
          portConfig: "",
        }
        for (const key in setting) {
          setting[key] = (setting[key] || "").trim()
        }

        await postHmmqttLinktest(setting)
        this.$message.success("MQTT 连接成功")
        this.connectLoading = false
      } catch (error) {
        this.connectLoading = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.mqtt_env-table ::v-deep .el-form-item {
  margin-bottom: 0;
}
</style>
